<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 2000px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        // js : BOM  DOM  ECMA 标准
        // DOM： document object model，文档对象模型 
        // BOM : browser object model ，浏览器对象模型 ，和浏览器、窗口有关的内容
        // BOM 顶级对象 window 
     //   console.log( window ) // 顶级对象 预定的 ，且 可以省略 
        // var a = 10;
        // console.log(a);
        // console.log(window.a);
        // console.log(window);

        // 一、获取窗口的大小： 窗口的宽 、高 。
        // 注意： 获取的宽和高是 窗口的,包含滚动条的宽度
    //    console.log("包含滚动条大小",window.innerWidth ) // 获取浏览器窗口的宽 
    //    console.log(window.innerHeight);
        
        // 获取不含滚动的宽和高 
    //    console.log("不包含滚动条大小", document.documentElement.clientWidth);


    </script>
</body>
</html>